import Item from './item';
import './index.less';
import type { FC } from 'react';
import { useEffect, useState } from 'react';
interface Props {
  value?: any[];
  onChange?: (val?: any[]) => void;
  list?: any[];
}
const Index: FC<Props> = ({ list = [], onChange, value }) => {
  const [checked, setChecked] = useState<any[]>([]);
  const update = (val) => {
    if (onChange) {
      onChange(val);
    } else {
      setChecked(val);
    }
  };
  const onClick = (current) => {
    if (!checked?.some(({ video_id }) => video_id === current.video_id)) {
      update([...checked, current]);
    } else {
      update([...checked].filter(({ video_id }) => video_id !== current.video_id));
    }
  };
  useEffect(() => {
    setChecked(value || []);
  }, [value]);
  return (
    <div className="c-lecturer-select-container">
      {list.map((item: any) => (
        <Item
          checked={checked?.map(({ video_id }) => video_id).indexOf(item.video_id) !== -1}
          title={item.title}
          key={item.video_id}
          duration={item.duration}
          onClick={() => onClick(item)}
        />
      ))}
    </div>
  );
};
export default Index;
